<template>
  <div id="framHouseZS">
    <div style="clear:both;height:60px;">
      <div class="leftT">
        <div style="width:30%">
          <img width="44" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/10.png" alt="">
        </div>
        <div style="width:67%;float: right;margin-top: -50px;">
          <p style="color:#02c9b4">----</p>
          <p style="">有流转意向(户)</p>
        </div>
      </div>
      <div class="rightT">
        <div style="width:30%">
          <img width="44" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/11.png" alt="">
        </div>
        <div style="width:64%;float: right;margin-top: -50px;margin-left:54px">
          <p style="color:#c89936">----</p>
          <p>实际农房流转(户)</p>
        </div>
      </div>
    </div>
    <div style="height:100px;width:355px;" class="bottomZhu1" id="bottomZhu11">
    </div>
    <div style="position: relative;">
      <div class="mask">
      <span class="reTop">批发零售:165844户</span>
    </div>
    <div class="mask1">
      <span class="reTop1">餐饮服务:165844户</span>
    </div>
    <div class="mask2">
      <span class="reTop2">民俗宾馆:165844户</span>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      autoHeight: 0
    }

  },
  methods: {
    _initConstructionBottom () {
      const self = this;
      var xData = ['农房流转面积', '惠及农户', '农房增收'];
      var yData = [264, 11, 17];
      this.num = 0;
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        barWidth: 15,
        grid: {
          top: "-6%",
            left: "3%",
            right: 60,
            bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          // name: "万户",
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              show: false,
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: "#000",
            },
          },
          // axisTick: "none",
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: true
          },
        },
        yAxis: {
          type: "category",
          data: xData.reverse(),
          axisLabel: {
            interval: 0,
            // fontSize: ,/
            color: "#000",
          },
          splitLine: {
            show: false
          },
          axisLine: { //y轴
            show: false
          },
          // type: 'category'
          axisTick: {
            show: false
          },
        },
        series: [
          {
            //   name: "安全保障",
            type: "bar",
            // stack: "total",
            label: {
              show: true,
              position: "right", //insideRight,
              color: "#000",
              formatter: '{c} 人'
            },
            itemStyle: {
             color: function(params) { 
                var colorList = ['#00C0FF','#EFE42A','#02c9b4']; 
                return colorList[params.dataIndex] 
              },
              barBorderRadius: [20, 20, 20, 20],
            },
            color: "#00C0FF",
            data: yData.reverse(),
          }
        ],
      };
      const element = self.$echarts.init(document.getElementById("bottomZhu11"));
      if (element) {
        element.clear();
        element.setOption(option);
      }
    },
  },
  mounted () {
    this._initConstructionBottom()
  }
}
</script>

<style lang="scss" scoped>
#framHouseZS {
  //   height: 50vh;
  overflow: auto;
  background: #ffffff;
  font-size: 14px;
  padding: 10px 10px 10px 0;
  // #bottomZhu11{
  //   width: 300px;
  //   height: 100px;
  // }
  .mask {
    color: #fff;
    margin: 2px auto;
    width: 280px;
    height: 32px;
    border-top: 32px solid #188bd9;
    border-right: 37px solid transparent;
    border-left: 37px solid transparent;
  }
  .mask1 {
    color: #fff;
    margin: 2px auto;
    width: 200px;
    height: 32px;
    border-top: 32px solid #02c9b4;
    border-right: 37px solid transparent;
    border-left: 37px solid transparent;
  }
  .mask2 {
    color: #fff;
    margin: 0 auto;
    width: 128px;
    height: 32px;
    background: #c89936;
  }
  .reTop{
    position: absolute;
    top: 0%;
    left: 36%;
    color: #fff;
  }
  .reTop1{
    position: absolute;
    top: 33%;
    left: 36%;
    color: #fff;
  }
  .reTop2{
    position: absolute;
    top: 67%;
    left: 36%;
    color: #fff;
  }
  .leftT {
    width: 50%;
    height: 50px;
    float: left;
    p {
      line-height: 24px;
    }
  }
  .rightT {
    widows: 50%;
    height: 50px;
    float: left;
    p {
      line-height: 24px;
    }
  }
}
</style>
